<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>2020年会 -- 幸运抽奖 </title>
    <script src="static/js/jquery-1.12.4.min.js"></script>
    <script src="static/js/pop.js"></script>
    <script src="static/js/imagePosition.js"></script>
    <script src="static/js/message.js"></script>
    <script src="static/js/luckDraw.js"></script>
</head>
<body>
<div id="messageWrapper">

</div>
   <div class="innerHtml">
       <div class="innerHtml-left">
           <div class="imageHtml">
               <div class="pprice" id="pprice">
                     <font></font>
                     <font></font>
                     <font></font>
               </div>
               <p><span>名额 <font id="one-count">5</font>/ <font id="total-count">10</font></span></p>
              <div class="image-content" id="imageHtml">
                  <ul>

                  </ul>
              </div>
               <div class="bottom-content clearfix">
                    <div class="erweima" id="erweima">
                        <img src="static/images/code.png" alt="code">
                    </div>
                       <div class="button" id="button">
                           <img src="static/images/ui-but2.png" alt="">
                       </div>

               </div>
           </div>
       </div>
       <div class="innerHtml-right">
             <div>
                 <ul class="content-great" id="content-luck">

                 </ul>
             </div>
       </div>

       <span class="money-dcroll">

       </span>
    <div class="innerhtml-bottom">

    </div>
   </div>
  <div class="am-modal-mask" id="winner">
       <div>
           <div class="am-modal">
                   <div class="content">
                       <div id="modal-content">
                           <span class="inner-image">
                               <img src="" alt="">
                           </span>
                           <p class="title">甜甜甜甜甜</p>

                           <a href="javascript:;" class="discard" id="discard">弃<i></i>奖</a>
                       </div>
                       <p class="price-modal">
                           <font></font>
                           <font></font>
                           <font></font>
                       </p>
                   </div>
               <div class="close" id="close">

               </div>
               <i class="rotate-modal"></i>
           </div>
       </div>
  </div>

<div class="am-modal-mask" id="erweimaModal">
     <div class="erwima">
         <div>
              <h3 style="padding: 20px;">扫码评论</h3>
               <div class="comment">
                   <img src="static/images/code.png" alt="code">
               </div>
         </div>
     </div>
</div>
<audio id="bgmusic" style="    display: none;" loop="loop" autoplay="autoplay" src="static/bg.mp3" controls=true></audio>
<script>
    var luck = '';
    var timer = null;
     var locationHref ='http://192.168.1.40:8090';
    $(function () {
         new luckList().init();
         LUCK = new LuckDraw();
         new getBarriage().init();
         $('#erweima').click(function () {
             $('#erweimaModal').show();
         });
       $('#erweimaModal').click(function () {
           $(this).toggle();
       });
     $('#discard').click(function () {
         var ids = $(this).attr('ids');
         $.ajax({
             type: 'post',
             dataType: 'json',
             url: '/discard',
             data: {
                 num:ids
             },
             success: function (data) {
                 if(data.status==1){
                     $('#winner').hide();
                     new luckList().getList();
                 }else{
                     dialog.tips({
                         title:'提示',
                         content: data.msg,
                         type: 'error'
                     });
                 }

             }
         })
     });
    });
    var validPeople = [];
    var STATUS =0;
    var textPeople   = [];
    var coutmUN = [];
    var translateData =null;
    var luckList = function luckList() {
        var prize = '';
        var users = '';
        var target = this;
        var imageHtml = $('#imageHtml');
        var ppriceHtml = $('#pprice');
        var len = 0;
        var button = $('#button');
        var toggle = false;
        this.init = function () {
            this.getList();
            this.button();
            $('#close').click(function () {
                $('#winner').hide();
                 target.getList();
            });
        }
        this.renderLuck = function (data) {
            var params ={};
             if(Object.keys(data).length==0){
                  $('.innerHtml-right').hide();
             }else{
                 $('.innerHtml-right').show();
             }
            for(var i in data){
                params[data[i]['prize']['full_name']] = [];
            }
            for(var i in data){
                params[data[i]['prize']['full_name']].push(data[i]);
            }
            var allHtml = '';
            for(var i in params){
                var lis = '';
                lis+='<p>'+i+'</p>';
                var uls ='';
                for(var j in params[i]){
                    uls+='<li class="clearfix">' +
                        '<aside><img src="'+locationHref+params[i][j]['image']+'" alt=""></aside><p>'+params[i][j]['real_name']+'</p></li>';
                }
                lis += '<ul>'+uls+'</ul>';
                allHtml+='<li>'+lis+'</li>';
            }
            $('#content-luck').html(allHtml);
        }
        this.getList = function () {
            validPeople.length = 0;
            validPeople = [];
            textPeople = [];
            textPeople.length  = 0;
            coutmUN.length = 0;
            coutmUN = [];
            $.ajax({
                type: 'get',
                dataType: 'json',
                url: '/luck',
                data: {},
                success: function (data) {
                    target.renderLuck(data);
                }
            })
            $.ajax({
                type: 'get',
                dataType: 'json',
                url: '/list',
                data: {},
                success: function (data) {
                    users = data['users'];
                    prize = data['prize'];
                    if(prize==null){
                        STATUS = 1;
                        var font = '<font>已</font><font>抽</font><font>完</font>';
                        $(ppriceHtml).html(font);
                        $('#one-count').html('无');
                        $('#total-count').html('无');
                        $('#imageHtml').find('ul').html('<p style="    font-weight: 400;text-align: left;text-align: center;color: #a9392b;font-size: 52px;\n' +
                            'line-height: 350px">兴旺发达    财源广进   恭喜发财</p>');

                        return false;
                    }
                    $('#total-count').html(data['prize']['total']);
                    $('#one-count').html(data['prize']['winner']);
                    var font = '<font>' + prize['full_name'].substr(0, 1) + '</font><font>' + prize['full_name'].substr(1, 1) + '</font><font>' + prize['full_name'].substr(2, 1) + '</font>';
                    $(ppriceHtml).html(font);
                    $('.price-modal').html(font);
                    target.tranformUser(users);
                }
            })
        }
        this.tranformUser = function (data) {
            data = this.randomUser(data);
            new ImagePosition().init({
                imgContent:$(imageHtml).find('ul'),
                initWid:$(imageHtml).width(),
                initHeight:$(imageHtml).height(),
                data:data
            });
        }
        /**
         * 打乱随机排序数组
         *
         * */
        this.randomUser = function (arr) {
            var data = [];
            for (var i in arr) {
                data.push(arr[i]);
            }
            len = data.length;
            for (var i = 0; i < len - 1; i++) {
                var index = parseInt(Math.random() * (len - i));
                var temp = data[index];
                data[index] = data[len - i - 1];
                data[len - i - 1] = temp;
            }
            return data;
        }

        this.button = function () {
            $(button).click(function () {
                if(STATUS==1){
                    return false;
                }
                if (toggle) {
                    $(this).find('img').attr('src', 'static/images/ui-but2.png');
                    target.end()
                    toggle = false;
                    domPool.length = 0;
                    domPool = [];
                    new getBarriage().sendMessage();
                    console.log(coutmUN);
                } else {
                    $(this).find('img').attr('src', 'static/images/ui-but2_2.png');
                    toggle = true;
                    sendMessage.stop();
                    clearInterval(timer);
                    target.start();

                }

            });
        }

        this.start = function () {
            document.getElementById("bgmusic").play();
            validPeople.sort((a,b) => {
                return a - b;
            });
            LUCK._init({
                rotateId: '.luck-one',
                activeClass: 'luck-active',
                luckNumber: Math.floor(Math.random() * (7 - 0) + 0),
                typeNumber: len,
                time: 3000,
                type: 'prize',
                success: function (res) {
                   var _tar = $('.luck-active');
                   target.congratulation(_tar);
                }
            });
        }
        this.congratulation = function (element) {
            document.getElementById("bgmusic").pause();
            var mp3 = "static/concratulation.mp3";
            var mp3Play = new Audio(mp3);
            mp3Play.play();
                   var name = $(element).attr('name');
                   var ids = $(element).attr('ids');
            $.ajax({
                type: 'POST',
                dataType: 'json',
                url: '/draw',
                data: {
                    nums:ids
                },
                success: function (data) {
                     $('#discard').attr('ids',ids);
                    $('#modal-content').find('img').attr('src',$(element).find('img').attr('src'));
                    $('#modal-content').find('.title').text(name);
                    $('#winner').show();
                }
            })
        }

        this.end = function () {
            LUCK._stop();
        }
    }

    /**获取弹幕**/
    var getBarriage = function getBarriage() {
        var target = this;
            this.init = function () {
                window.onload = function () {
                    var conn;
                    if (window["WebSocket"]) {
                        conn = new WebSocket('ws://'+window.location.host+'/ws');
                        conn.onclose = function (evt) {
                            dialog.tips({
                                title:'提示',
                                content: '关闭',
                                type: 'error'
                            });
                            console.log("connection closed");
                        };
                        conn.onerror = function (evt) {
                            console.log(evt)
                            dialog.tips({
                                title:'提示',
                                content: '连接失败',
                                type: 'error'
                            });
                        };
                        conn.onmessage = function (evt) {
                            var messages = evt.data;
                               danmuPool.push(messages);

                        }
                    }  else {
                        console.log("your browser does not support WebSockets.");
                    }
                };
                this.sendMessage();
            }
            this.sendMessage = function () {
                sendMessage.init();
                // 每隔1ms从弹幕池里获取弹幕（如果有的话）并发射
               timer =  setInterval(() => {
                    let channel;
                    if (danmuPool.length && (channel = sendMessage.getChannel()) != -1) {
                        let dom = domPool[channel].shift();
                        let danmu = danmuPool.shift();
                        sendMessage.shootDanmu(dom, danmu, channel);
                    }
                },200);
            }
    }
</script>
</body>
<style>
    .luck-active{
        content:'';
        width: 100%;
        height: 100%;
        border: 2px solid black!important;
    }
    .toggle_white{
        background-color: white!important;
    }
    .toggle_yellow{
        background:rgba(255,130,29,1)!important;
    }
    html,body{
        height: 100%;
        width: 100%;
        padding: 0;
        overflow-x: hidden;
        margin: 0;
        font-family: "Microsoft YaHei", "微软雅黑", sans-serif, Helvetica, Arial;
    }
    p,ul{
        padding: 0;
        margin: 0;
    }
    img{
        width: 100%;
        height: 100%;
    }
    .discard{
        color: #d7d0d0b8;
        left: 153px;
        position: absolute;
        bottom: 161px;
        text-decoration: none;
        background: rgba(135,76,0,1);
        padding: 4px 15px;
        display: inline-block;
        color: rgba(241,189,122,1);
        line-height: 18px;
        font-size: 18px;
        border-radius:0px 16px 0px 0px;
    }
    .discard i{
        background: url(static/images/xxx.png) no-repeat;
        width: 10px;
        height: 10px;
        display: inline-block;
        margin: 0 2px;
    }
    .pprice{

    }
    .pprice font{
        font-size: 50px;
        position: absolute;
        color:rgba(236,194,123,1);
    }
    .pprice font:nth-of-type(1){
        top: 26px;
        left: 371px;
    }
    .pprice font:nth-of-type(2){
        top: 26px;
        left: 450px;
    }
    .pprice font:nth-of-type(3){
        top: 26px;
        left: 532px;
    }
    .innerHtml {

    }
    .innerHtml-right .content-great>li>p{
        font-size: 17px;
        color: #A03714;
        font-weight: bold;
        margin-bottom: 13px;
    }
    .content-great{
        height: 360px;
        overflow-x: hidden;
    }
    .content-great>li{
        padding-bottom: 0!important;
    }
    .innerHtml-right li{
        list-style: none;
        padding: 0 0 15px 0;
    }
    .innerHtml-right>div{
        margin: 110px 10px 0 40px;
    }
    .innerHtml-right li aside{
        width: 24px;
        height:24px;
        float: left;
    }
    .innerHtml-right li aside img{
        width: 100%;
        height: 100%;
    }
    .innerHtml-right{
        background: url(static/images/ui_bg3.png) no-repeat;
        width: 202px;
        height: 587px;
        position: absolute;
        right: 0;
        top: 80px;
        -webkit-transform: scale(1.27);
        -ms-transform: scale(1.27);
        transform:scale(1.27);
    }
    .innerHtml-right ul ul p{
        margin-left: 30px;
        font-size: 14px;
        color: #666666;
        margin-top: 5px;
        width: 112px;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .imageHtml{
        background: url(static/images/ui_bg5.png) no-repeat;
        width: 1200px;
        height: 853px;
        position: absolute;
        z-index: 2;
        text-align: center;
        /* top: 50%; */
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translateX(-50%);
        bottom: 0;
    }
    .imageHtml>p{
        margin-top: 54px;
        margin-left: 381px;
    }
    .imageHtml>p span{
        color: #A03714;
        font-size: 16px;
    }
    .imageHtml>p span font{
        font-size: 32px;
        padding: 0 8px;
        vertical-align: middle;
    }
    .imageHtml>p span font:nth-of-type(1){
        margin-left: 6px;
    }
    .imageHtml .image-content{
        width: 752px;
        height: 416px;
        margin-left: 93px;
        margin-top: 26px;
        position: relative;
    }
    .luck-one{
        position: relative;
    }
    .luck-one .notValid{
        position: absolute;
        z-index: 32;
        width: 100%;
        height: 100%;
        display: inline-block;
         background-color: red;
        opacity: 0.6;
    }
  .luck-active span{
      display: inline-block!important;
  }
    .luck-one span{
        width: 67px;
        display: none;
        height: 67px;
        position: absolute;
        border: 2px solid rgba(253,223,116,1);
        left: -4px;
        top: -4px;
    }
    .luck-one span i{
        width:7px;
        z-index: 3;
        background-color: white;
        height:7px;
        position: absolute;
        display: inline-block;
        box-shadow:0 2px 5px 0 rgba(247,202,75,0.15);
        border-radius:50%;
    }
    .luck-one span i{
        display: inline-block;
        width: 7px;
        height: 7px;
        z-index: 2;
        border-radius: 50%;
        position: absolute;
    }

    .image-content li{
        list-style: none;
        width: 65px;
        position: relative;
        height: 65px;
        border: 2px solid white;
        float: left;
    }
    .imageHtml .bottom-content .erweima{
        width: 85px;
        height: 85px;
        margin-left: 107px;
        float: left;
        margin-top: 46px;
    }
    .imageHtml .bottom-content .button{
        width: 357px;
        height: 204px;
        float: left;
        margin-left: 165px;
        margin-top: 2px;
    }
    .clearfix{
        *zoom: 1;
    }
    .clearfix:before, .clearfix:after{
        content: ".";
        display: block;
        height:0;
        clear:both;
        visibility: hidden;
    }
    .clearfix:after{
        clear: both;
    }
    .innerHtml{
        position: relative;
        background-image: url(static/images/ui_bg7.png);
        background-repeat: repeat;
        background-size: 100%;
        height: 100%;
    }
    .money-dcroll{
        width: 376px;
        height: 376px;
        background-image: url(static/images/ui_jinbi.png);
        background-size: 100%;
        position: fixed;
        right: -108px;
        z-index: 2;
        bottom: -210px;
        animation: myfirst 1s infinite linear;
        -moz-animation: myfirst 1s infinite linear;	/* Firefox */
        -webkit-animation: myfirst 1s infinite linear;;	/* Safari 和 Chrome */
        -o-animation: myfirst 1s infinite linear;	/* Opera */

    }
    @keyframes myfirst
    {
        0%   {bottom:-210px;}
        10%   {bottom:-200px;}
        20%   {bottom:-175px;}
        30%   {bottom:-160px;}
        40%  {bottom:-155px}
        50%  {bottom:-150px}

        60%  {bottom:-155px}
        70%  {bottom:-165px}
        80%  {bottom:-175px}
        90%  {bottom:-200px}
        100% {bottom:-210px}
    }

   /* @-moz-keyframes myfirst !* Firefox *!
    { 0%   {bottom:-175px;}
        25%  {bottom:-172px}
        50%  {bottom:-170px}
        100% {bottom:-165px}
    }

    @-webkit-keyframes myfirst !* Safari 和 Chrome *!
    {
        0%   {bottom:-175px;}
        25%  {bottom:-172px}
        50%  {bottom:-170px}
        100% {bottom:-165px}
    }

    @-o-keyframes myfirst !* Opera *!
    {
        0%   {bottom:-175px;}
        25%  {bottom:-172px}
        50%  {bottom:-170px}
        100% {bottom:-165px}
    }*/
    .innerhtml-bottom{
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 1;
        height: 286px;
        width: 100%;
        background: url(static/images/ui_bg6.png) no-repeat;
        background-size: 100% 100%;
    }
    .am-modal-mask{
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        display: none;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.8);
        z-index: 1100;
    }
    .am-modal-mask>div{
          position: relative;
        width: 100%;
        height: 100%;
    }
    .am-modal-mask .erwima{
        width: 400px;
        height: 400px;
        top: 50%;
        background-color: white;
        border-radius: 10px;
        left: 50%;
        display: inline-block;
        text-align: center;
        position: absolute;
        /* left: 50%; */
        -ms-transform: translate(-50%,-50%);
        -webkit-transform:translate(-50%,-50%);
        transform: translate(-50%,-50%);
    }
    .erwima .comment{
        width: 300px;
        height: 300px;
        border: 1px solid;
        margin-left: 50px;
    }
    .am-modal-mask .am-modal{
        position: absolute;
        width: 785px;
        height:785px;
        display: inline-block;
        text-align: center;
        background-repeat: no-repeat;
        top: 50%;
        left: 50%;
        /* left: 50%; */
        -ms-transform: translate(-50%,-50%);
        -webkit-transform:translate(-50%,-50%);
        transform: translate(-50%,-50%);

    }
    .am-modal-mask .am-modal .rotate-modal{
        background-image: url(static/images/ui_guang.png);
        position: absolute;
        width: 857px;
        top: -66px;
        left: -19px;
        height: 857px;
    }
    .rotate-modal{
        -webkit-animation: circle 15s infinite linear;
        -moz-animation: circle 15s infinite linear;
        -ms-animation: circle 15s infinite linear;
        -o-animation: circle 15s infinite linear;
        animation: circle 15s infinite linear;
    }

    @-webkit-keyframes circle {
        0% {
            -webkit-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }
    @-moz-keyframes circle {
        0% {
            -webkit-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }
    @-ms-keyframes circle {
        0% {
            -webkit-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }
    @-o-keyframes circle {
        0% {
            -webkit-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }
    @keyframes circle {
        0% {
            -webkit-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }
    .am-modal .content{
        background-image: url(static/images/ui_bg2.png);
        background-repeat: no-repeat;
        width: 435px;
        height: 360px;
        position: relative;
        margin: 0 auto;
        margin-top: 181px;
        z-index: 344444;
        -ms-transform: scale(1.3);
        -webkit-transform:scale(1.3);
        transform: scale(1.3);
    }
    .am-modal .close{
        background-image: url(static/images/ui-but1.png);
        width: 45px;
        height: 45px;
        text-align: center;
        z-index: 444444;
        position: absolute;
        text-align: center;
        margin: 0 auto;
        left: 46%;
        bottom: 139px;
    }
    .price-modal font{
        font-size: 39px;
        position: absolute;
        color:rgba(236,194,123,1);
    }
    .price-modal font:nth-of-type(1){
        bottom: 37px;
        left: 129px;
    }
    .price-modal font:nth-of-type(2){
        bottom: 37px;
        left: 196px;
    }
    .price-modal font:nth-of-type(3){
        bottom: 37px;
        left: 259px;
    }
    .price-modal{
        position: absolute;
        bottom: 0;
    }
    .content .inner-image{
        width:122px;
        height:122px;
        background:rgba(255,255,255,1);
        border:4px solid rgba(135,76,0,1);
        border-radius:10px;
        display: inline-block;
        margin-top: 69px;
    }
    .title{
        font-size:20px;
        font-weight:300;
        color:rgba(255,255,255,1);
        line-height:18px;
        margin-top: 12px;
    }
    .right {
        position: absolute;
        visibility: hidden;
        white-space: nowrap;
        font-size: 14px;
        /*left: 700px;*/
    }
    .left {
        position: absolute;
        z-index: 33333;
        white-space: nowrap;
        font-size: 28px;
        color:black;
        user-select: none;
        transition: transform 7s linear; /* 时间相同 越长的弹幕滑动距离越长 所以越快~ */
    }
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .am-tips{
        font-size: 14px;
        position: fixed;
        z-index: 99999;
        width: 100%;
        left: 0;
        top:0px;
        pointer-events: none;
    }
    .am-tips span{
        font-size: 14px;
        color: #fff;
    }
    .am-tips i{
        /* width: 100px; */
        height: 18px;
        line-height: 18px;
        display: inline-block;
        /* line-height: 0.28rem; */
        font-size: 14px;
        font-style: normal;
        margin-right: 5px;
    }
    .am-view-notice{
        padding: 8px;
        text-align: center;
        transition: height .3s ease-in-out,padding .3s ease-in-out;
    }
    .am-view-notice-content {
        display: inline-block;
        pointer-events: all;
        padding: 10px 40px;
        border-radius: 4px;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
        opacity: 70%;
        position: relative;
        cursor: pointer;
        background-color: #0E63AF;
        overflow: hidden;
    }

</style>
</html>